import React, { Component } from 'react';
import { TextInput, View, Image, Text, TouchableOpacity, ScrollView } from 'react-native';
import Colors from '../constants/Colors';
import { unitWidth, unitHeight } from '../constants/AdapterUtil';
import { SubmitButton1 } from '../components/Button';
import { CodeInput, IconInput, IconInput2 } from '../components/Input';
import { show } from '../constants/Toast';
import TextUtil from '../constants/TextUtil';
import { api_account_register, api_account_verifycode } from '../constants/HttpServices';
import { getFetch, postFetch } from '../constants/HttpExtension';
import CommonUtil from '../constants/CommonUtil';

export default class RegisterScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            mobile: '',
            code: '',
            password: '',
            confirmPassword: '',
            verifyCode: '',//校验码
            VerifyInfo: {},

            codeImgUrl: '',
            codeKey: ''
        }
    }

    componentDidMount() {
        CommonUtil.getGraphics({
            success: (response) => {
                this.setState({
                    codeImgUrl: response.result.imgurl,
                    codeKey: response.result.key,
                })
            },
            fail: (response) => {

            }
        })
    }

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center' }}>
                <ScrollView showsVerticalScrollIndicator={false}>
                    <View style={{ alignItems: 'center' }}>
                        <Image style={{ width: 85 * unitWidth, height: 85 * unitWidth, marginTop: 100 * unitHeight }} source={require('../res/logo_a.png')} resizeMode='stretch' />
                        <IconInput
                            style={{ marginTop: 35 * unitWidth }}
                            onChangeText={this.onPhoneTextChange.bind(this)}
                            IconChildren={
                                <Image style={{ width: 14 * unitWidth, height: 22 * unitHeight }} source={require('../res/ic_sj.png')} resizeMode='stretch' />
                            }
                            keyboardType='numeric'
                            maxLength={11}
                            placeholder='请输入您的手机号码'
                            value={this.state.mobile} />
                        <IconInput
                            style={{ marginTop: 13 * unitWidth }}
                            onChangeText={this.onPasswordTextChange.bind(this)}
                            IconChildren={
                                <Image style={{ width: 16 * unitWidth, height: 20 * unitHeight }} source={require('../res/ic_lock.png')} resizeMode='stretch' />
                            }
                            maxLength={20}
                            secureTextEntry={true}
                            placeholder='请设置您的密码'
                            value={this.state.password} />
                        <IconInput
                            style={{ marginTop: 13 * unitWidth }}
                            onChangeText={this.onConfirmPasswordTextChange.bind(this)}
                            IconChildren={
                                <Image style={{ width: 16 * unitWidth, height: 20 * unitHeight }} source={require('../res/ic_lock.png')} resizeMode='stretch' />
                            }
                            maxLength={20}
                            secureTextEntry={true}
                            placeholder='请再次确认您的密码'
                            value={this.state.confirmPassword} />
                        <IconInput2
                            style={{ marginTop: 13 * unitWidth }}
                            onChangeText={this.onVerifyCodeChange.bind(this)}
                            IconChildren={
                                <Image style={{ width: 16 * unitWidth, height: 18 * unitHeight }} source={require('../res/ic_yzm.png')} resizeMode='stretch' />
                            }
                            CodeImage={
                                <TouchableOpacity activeOpacity={0.7} onPress={() => {
                                    CommonUtil.getGraphics({
                                        success: (response) => {
                                            this.setState({
                                                codeImgUrl: response.result.imgurl,
                                                codeKey: response.result.key,
                                            })
                                        },
                                        fail: (response) => {

                                        }
                                    })
                                }}>
                                    <Image style={{ width: 80 * unitWidth, height: 32 * unitHeight, backgroundColor: Colors.white }} source={{ uri: this.state.codeImgUrl }} resizeMode='stretch' />
                                </TouchableOpacity>
                            }
                            maxLength={10}
                            placeholder='请输入图片验证码'
                            value={this.state.verifyCode} />
                        <CodeInput style={{ marginTop: 15 * unitWidth }} verifyCode={this.state.verifyCode}
                            IconChildren={
                                <Image style={{ width: 16 * unitWidth, height: 18 * unitHeight }} source={require('../res/ic_yzm.png')} resizeMode='stretch' />
                            }
                            text={this.state.code} phone={this.state.mobile} onChangeText={this.onCodeTextChange.bind(this)} onPress={this.getCode.bind(this)} />
                        <SubmitButton1 style={{ marginTop: 48 * unitWidth }} text='注册' onPress={this.doRegister.bind(this)} />
                        <Text style={{
                            fontSize: 12, color: Colors.color99, marginVertical: 16 * unitWidth, borderBottomColor: Colors.color99,
                            borderBottomWidth: 0.5
                        }} onPress={() => { this.props.navigation.navigate('Login') }}>已有账号，去登录</Text>
                    </View>
                </ScrollView>
            </View>
        )
    }

    onPhoneTextChange(text) {
        this.setState({
            mobile: text
        })
    }

    onVerifyCodeChange(text) {
        this.setState({
            verifyCode: text
        })
    }

    onCodeTextChange(text) {
        this.setState({
            code: text
        })
    }

    onPasswordTextChange(text) {
        this.setState({
            password: TextUtil.getTextInput(text, 4)
        })
    }

    onConfirmPasswordTextChange(text) {
        this.setState({
            confirmPassword: TextUtil.getTextInput(text, 4)
        })
    }

    getCode() {
        if (this.state.verifyCode == '') {
            show('请输入校验码')
            return false;
        }
        let params = {
            "mobile": this.state.mobile,
            "temp": 'sms_reg',//找回密码：sms_forget，注册：sms_reg
            'imgcodekey': this.state.codeKey,
            'imgcode': this.state.verifyCode
        }
        postFetch(api_account_verifycode, params, {
            success: (response) => {
                show('发送成功');
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
        return true
    }

    doRegister() {
        if (this.state.mobile == '') {
            show('请输入手机号');
            return;
        } else if (this.state.password == '') {
            show('请输入密码');
            return;
        } else if (this.state.password != this.state.confirmPassword) {
            show('两次输入密码不一致');
            return;
        } else if (this.state.password.length < 6) {
            show('请输入最少6位密码');
            return;
        } else if (this.state.code == '') {
            show('请输入验证码');
            return;
        }
        let params = {
            'user_type': '1',
            "mobile": this.state.mobile,
            "pwd": this.state.password,
            "verifycode": this.state.code,
        }
        postFetch(api_account_register, params, {
            success: (response) => {
                show('注册成功');
                this.props.navigation.navigate('Login')
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}